<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性练习作业</title>
    <style>
        /* 基础练习 */
        .box {
            background-color: navy; /* 深蓝色背景 */
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
        }

        .image-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'); /* 背景图片 */
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
        }

        .cover-image {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-size: cover; /* 背景图片填充整个元素 */
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
        }

        .header {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-position: right bottom; /* 背景图像定位到右下角 */
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        .pattern {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-repeat: repeat-y; /* 垂直方向重复 */
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
        }

        /* 进阶练习 */
        .multi-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'), url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 多重背景 */
            background-position: center center, left top; /* 背景图像定位 */
            background-repeat: no-repeat, repeat; /* 背景图像重复方式 */
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        .gradient-box {
            background: linear-gradient(to right, blue, red); /* 线性渐变 */
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        .cropped-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-position: center; /* 背景图像居中 */
            background-size: 50% 50%; /* 背景图像缩放 */
            background-clip: content-box; /* 背景图片裁剪到内容区域 */
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
        }

        .responsive-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-size: contain; /* 背景图像自适应容器大小 */
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        .sticky-footer {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-attachment: fixed; /* 背景图像固定 */
            background-position: bottom; /* 背景图像位于底部 */
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        /* 高级练习 */
        .compact-background {
            background: url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg') no-repeat center / cover navy;
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        .parent {
            background-color: lightgray; /* 父元素背景颜色 */
            padding: 20px;
        }

        .child {
            background-color: inherit; /* 子元素继承父元素的背景颜色 */
            width: 100px;
            height: 100px;
        }

        .layered-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png'), url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 多重背景层 */
            background-blend-mode: multiply; /* 背景图像混合 */
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        .responsive-image {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-size: cover;
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        @media (max-width: 600px) {
            .responsive-image {
                background-image: url('https://img.haruka.net.cn/image/2024/10/08/12bhlp0.jpeg'); /* 小屏幕下的背景图像 */
            }
        }

        .before-element {
            position: relative;
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
        }

        .before-element::before {
            content: "";
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            background-position: top center; /* 背景图像在顶部居中 */
            background-size: 50px 50px;
            position: absolute;
            top: 0;
            left: 50%;
            width: 50px;
            height: 50px;
            transform: translateX(-50%);
        }

        .dynamic-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            width: 300px;
            height: 150px;
            margin-bottom: 20px;
            animation: moveBackground 5s linear infinite; /* 背景移动动画 */
        }

        @keyframes moveBackground {
            from { background-position: 0 0; }
            to { background-position: 100% 0; }
        }

        .text-over-image {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            color: white;
            text-shadow: 2px 2px 5px black; /* 文字阴影，确保文字在背景图上清晰可见 */
            width: 300px;
            height: 150px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .bordered-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            border: 5px solid #333; /* 边框 */
            width: 300px;
            height: 150px;
            box-sizing: border-box; /* 确保背景图和边框对齐 */
            margin-bottom: 20px;
        }

        .shape-background {
            background-image: url('https://img.haruka.net.cn/image/2024/10/08/129vfle.png');
            border-radius: 50%; /* 设置圆形背景 */
            width: 150px;
            height: 150px;
            margin-bottom: 20px;
        }

        .hover-effect {
            background-color: lightblue;
            width: 300px;
            height: 150px;
            transition: background-color 0.3s; /* 背景颜色平滑过渡 */
            margin-bottom: 20px;
        }

        .hover-effect:hover {
            background-color: lightcoral; /* 鼠标悬停时改变背景颜色 */
        }
    </style>
</head>
<body>
    <!-- 基础练习 -->
    <div class="box"></div>
    <div class="image-background"></div>
    <div class="cover-image"></div>
    <div class="header"></div>
    <div class="pattern"></div>

    <!-- 进阶练习 -->
    <div class="multi-background"></div>
    <div class="gradient-box"></div>
    <div class="cropped-background"></div>
    <div class="responsive-background"></div>
    <div class="sticky-footer"></div>

    <!-- 高级练习 -->
    <div class="compact-background"></div>
    <div class="parent">
        <div class="child"></div>
    </div>
    <div class="layered-background"></div>
    <div class="responsive-image"></div>
    <div class="before-element"></div>
    <div class="dynamic-background"></div>
    <div class="text-over-image">文字在背景图片上显示</div>
    <div class="bordered-background"></div>
    <div class="shape-background"></div>
    <div class="hover-effect"></div>
</body>
</html>